<template>
  <div class="publish-container">
    <div class="publish-content">
      <div class="publish-header">
        <h1>发布文章</h1>
        <p>分享你的想法和见解</p>
      </div>
      <form class="publish-form" @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="title">文章标题</label>
          <input 
            id="title"
            v-model="form.title" 
            type="text" 
            required 
            placeholder="请输入文章标题"
            class="form-input"
          />
        </div>
        <div class="form-group">
          <label for="excerpt">文章摘要</label>
          <textarea 
            id="excerpt"
            v-model="form.excerpt" 
            required 
            placeholder="请输入文章摘要"
            class="form-textarea"
          ></textarea>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="category">分类</label>
            <select id="category" v-model="form.category" required class="form-select">
              <option value="">请选择分类</option>
              <option value="技术">技术</option>
              <option value="生活">生活</option>
              <option value="思考">思考</option>
            </select>
          </div>
          <div class="form-group">
            <label for="tags">标签</label>
            <input 
              id="tags"
              v-model="tagsInput" 
              type="text" 
              placeholder="请输入标签，用逗号分隔"
              class="form-input"
              @input="handleTagsInput"
            />
          </div>
        </div>
        <div class="form-group">
          <label for="content">文章内容</label>
          <textarea 
            id="content"
            v-model="form.content" 
            required 
            placeholder="请输入文章内容"
            class="form-textarea"
            rows="20"
          ></textarea>
          <div class="content-tips">
            <p>支持 Markdown 格式</p>
          </div>
        </div>
        <div class="form-actions">
          <button type="submit" class="btn-primary" :disabled="isSubmitting">
            {{ isSubmitting ? '发布中...' : '发布文章' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const form = reactive({
  title: '',
  excerpt: '',
  content: '',
  category: '',
  tags: [] as string[],
  coverImage: ''
})

const tagsInput = ref('')
const isSubmitting = ref(false)

const handleTagsInput = () => {
  const tags = tagsInput.value
    .split(',')
    .map(tag => tag.trim())
    .filter(tag => tag.length > 0)
  form.tags = [...new Set(tags)]
}

const handleSubmit = async () => {
  if (!form.title || !form.excerpt || !form.content || !form.category) {
    alert('请填写所有必填字段')
    return
  }

  try {
    isSubmitting.value = true
    const token = localStorage.getItem('token')
    const response = await fetch('http://localhost:3000/api/articles', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`
      },
      body: JSON.stringify({
        title: form.title,
        content: form.content,
        category: form.category,
        tags: form.tags.join(','),
        coverImage: form.coverImage,
      }),
    })

    if (!response.ok) throw new Error('发表失败')

    alert('文章发表成功！')
    router.push('/')
  } catch (error) {
    alert('发表失败，请重试')
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
@import './style.css';
</style> 